<template>
  <el-dialog :title="form.id == 0?'新增':'修改'" :visible.sync="modelinfo.status">
    <el-form :model="form" ref="ruleForm" label-width="100px" :rules='rules'>
        <el-form-item label="角色名称" prop="rolename">
        <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" prop="menus">
<!--  -->
        <el-tree
        :data="menuList"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps">
        </el-tree>

<!--  -->
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
import {mapActions,mapState} from 'vuex'
import vm from '../../vm/vm'
export default {
     props: ['modelinfo'],
     computed:{
         ...mapState({menuList:state=>state.menu.menuList})
     },
     methods:{
         ...mapActions("menu",["menuListAction"]),
         submit(){
            console.log("submit")
            this.$refs["ruleForm"].validate((valid)=>{
                console.log(valid)
                if(valid){
                    var url = this.form.id == 0?"/roleadd":"/roleedit";
                    this.$http.post(url,this.form).then(
                        res=>{
                            if(res.status == 200){
                                //清空表单
                                this.form = {
                                    id: 0,
                                    rolename: "",
                                    menus: '',
                                    status: 1
                                }
                                this.$refs["tree"].setCheckedKeys([])
                                //关闭模态框
                                this.modelinfo.status = false
                                //刷新列表
                                this.$emit("updateRoleList")
                            }
                        }
                    )
                }
            })
         }
     },
     created(){
         vm.$on("sendData",(result)=>{
             this.modelinfo.status = true
             this.form = result
             setTimeout(()=>{
                 this.$refs["tree"].setCheckedKeys(result.menus.split(","))
             },50)
                 
         })
         this.menuListAction()
     },
     data() {
      var checkTree = (rule, value, callback) => {
        var obj = this.$refs["tree"].getCheckedKeys();
        if (obj.length == 0) {
            return callback(new Error('角色权限不能为空'));
        }
        this.form.menus = obj.join(",")
        callback()  
      };
      return {
        form: {
          id: 0,
          rolename: "",
          menus: '',
          status: 1
        },
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        rules: {
            rolename:{required:true,message: "角色名称不可以为空", trigger: "blur"},
            status:{required:true,message: "角色状态不可以为空", trigger: "blur"},
            menus:{ validator: checkTree, trigger: 'blur' }
        }
     }
    
    }


}

</script>

<style>

</style>